<template>
	<view class="riches_counter">
		<!-- 搜索 -->
		<!--  -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="search">
			<view class="input">
				<text style="font-size: 40rpx;font-weight: 600;">财富</text>
				<view class="center">
					<u-icon name="search"></u-icon>
					<input type="text" value="" placeholder="提前解锁收益" />
				</view>
				<u-icon name="plus" style="color:#ff7781 ; font-size: 40rpx;"></u-icon>
			</view>

		</view>
		<!-- #endif -->

		<!-- 总资产 -->
		<!-- <view class="zichan">
			<view class="chengter">
				<view class="left">
					<text>总资产</text>
					<u-icon name="eye" style="margin-left: 15rpx;"></u-icon>
					<view class="">
						7.09
					</view>
				</view>
				<view class="right">
					<text>最新收益</text>
					<view class="">
						0.00
					</view>
				</view>
			</view>
		</view> -->
		<!-- 基金分类 -->
		<view class="fundType">
			<view class="center">
				<view class="first" v-for="item in fundTypeData" :key="item.id" @click="goTo(item.url)">
					<image :src="item.img"></image>
					<text style="margin-top: 8rpx;">{{item.name}}</text>
				</view>

			</view>
		</view>


		<!-- 实时新闻 -->
		<view class="realTimeNews">
			<view class="center">
				<view class="top">
					<u-notice-bar mode="horizontal" type="error" :more-icon="true" :close-icon="true" :list="list">
					</u-notice-bar>
				</view>
				<view class="bottom">
					<view class="first" v-for="item in realTimeNewsDate" :key="item.id">
						<text class="title_one">{{item.title_1}}</text>
						<text class="title_two">{{item.title_2}}</text>
						<view class="">
							<text class="title_three">{{item.title_3}}</text>
							<text class="title_four">{{item.title_4}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 专属福利 -->
		<view class="exclusiveBenefits">
			<view class="center">
				<view class="title">
					<text style="font-size: 40rpx;font-weight: 600;">专属福利</text>
					<text style="color: #999999;">查看更多</text>
				</view>
				<view class="bottom">
					<view class="taobao">
						<view class="ticket">
							<view class="left">
								<view class="image">
									<image src="../../static/iamges/time.png" mode="widthFix"></image>
								</view>
								<view class="price">
									<text class="tetx_1">￥8.88</text>
									<text class="text_2">优惠券</text>
								</view>
								<view class="last">
									<text class="last_title">还能充值话费</text>
								</view>
							</view>
							<view class="right">
								<view>立即领取</view>
							</view>
						</view>
					</view>
					<view class="taobao">
						<view class="ticket">
							<view class="left">
								<view class="image">
									<image src="../../static/iamges/hot.png" mode="widthFix"></image>
								</view>
								<view class="price">
									<text class="tetx_1">￥120</text>
									<text class="text_2" style="color: #ff4658;">元理财券</text>
								</view>
								<view class="last">
									<text class="last_title">理财专享券</text>
								</view>
							</view>
							<view class="right">
								<view>立即领取</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门基金 -->
		<view class="hotFunds">
			<view class="center">
				<view class="title">
					<text style="font-size: 40rpx;font-weight: 600;">热门基金</text>
					<text style="color: #999999;">查看更多</text>
				</view>
				<view class="hotFunds_list">
					<view class="first" v-for="item in hotFundsData" :key="item.id">
						<view class="top">
							<text class="top_title">{{item.title}}</text>
							<view class="right" v-if="item.id==0">
								优质配产
							</view>
						</view>
						<view class="bottom">
							<view class="bottom_left">
								<text class="left_t1">{{item.a}}</text><text class="left_t2">%</text>
								<view class="v">
									{{item.b}}
								</view>
							</view>
							<view class="bottom_center">
								<text class="center_t1">{{item.c}}</text><text class="center_t2">+</text>
								<view class="v">
									{{item.d}}
								</view>
							</view>
							<view class="bottom_right">
								<text class="right_t1">{{item.e}}</text>
								<view class="v">
									{{item.f}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		onNavigationBarButtonTap() {
			console.log("你点击了按钮")
			uni.switchTab({
				url: "/pages/index/index"
			})
		},
		onNavigationBarSearchInputChanged() {
			console.log("你输入了信息")
		},
		data() {
			return {
				tabbar: '',
				fundTypeData: [{
						id: 0,
						name: '定期',
						img: '../../static/iamges/dingqi.png',
						url: "/pages/riches/regular/regular",
					},
					{
						id: 1,
						name: '活期',
						img: '../../static/iamges/huoqi.png',
						url: "/pages/riches/current/current",
					},
					{
						id: 2,
						name: '基金',
						img: '../../static/iamges/jijing.png',
						url: "/pages/riches/fund/fund",
					},
					{
						id: 3,
						name: '黄金',
						img: '../../static/iamges/huangjing.png',
						url: "/pages/riches/gold/gold",
					},
				],
				list: [
					'黄金 | 实时金价  361.1 -8.3 -2.66%',
					'黄金 | 实时金价  361.1 -8.3 -2.66%',
					'黄金 | 实时金价  361.1 -8.3 -2.66%',
				],
				realTimeNewsDate: [{
						id: 0,
						title_1: "上证指数",
						title_2: "3509.08",
						title_3: "-75.97",
						title_4: "-2.10%"
					},
					{
						id: 1,
						title_1: "深证成指",
						title_2: "14507.45",
						title_3: "-321.36",
						title_4: "-2.17%"
					},
					{
						id: 2,
						title_1: "创业扳指",
						title_2: "1914.11",
						title_3: "-63.06",
						title_4: "-2.12%"
					},
				],
				hotFundsData: [{
						id: 0,
						title: "南方全天候策略混合A(FOF)",
						a: "19.31",
						b: "近一年收益率",
						c: "固收",
						d: "理财新宠",
						e: "参与新股申购",
						f: "国内首支FOF基金"
					},
					{
						id: 1,
						title: "基金 | 南方安泰混合",
						a: "15.75",
						b: "近一年收益率",
						c: "固收",
						d: "理财新宠",
						e: "参与新股申购",
						f: "国内首支FOF基金"
					},
				],

			}
		},
		onLoad() {
			/**
			 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
			 */
			this.tabbar = [{
					iconPath: "home",
					selectedIconPath: "home-fill",
					text: '借贷',
					count: 0,
					isDot: true,
					customIcon: false,
					pagePath: "/pages/lending/lending"
				},
				{
					iconPath: "red-packet",
					selectedIconPath: "red-packet-fill",
					text: '财富',
					customIcon: false,
					pagePath: "/pages/riches/riches"
				},
				{
					iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
					selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
					text: '首页',
					midButton: true,
					customIcon: false,
					pagePath: "/pages/index/index"
				},
				{
					iconPath: "bell",
					selectedIconPath: "bell-fill",
					text: '财顾',
					customIcon: false,
					pagePath: "/pages/adviser/adviser"
				},
				{
					iconPath: "account",
					selectedIconPath: "account-fill",
					text: '我的',
					count: 0,
					isDot: false,
					customIcon: false,
					pagePath: "/pages/mycenter/mycenter"
				},
			]
		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fafafa;
	}

	.riches_counter {
		box-sizing: border-box;
		background-color: #fafafa;

		.search {
			background: #ffffff;

			padding: 15rpx 24rpx;
			/* #ifdef MP-WEIXIN */
			margin-top: 0rpx;

			/*  #endif */
			.input {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.center {
					//border: 1px solid red;
					width: 520rpx;
					border-radius: 35rpx;
					height: 70rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					padding: 0 24rpx;
					background-color: #fafafa;

					input {
						width: 90%;
						padding: 0 10rpx;
						//border: 1px solid black;
					}
				}
			}
		}

		.zichan {
			padding: 0 24rpx;
			//border: 1px solid black;
			height: 146rpx;
			margin-top: 24rpx;

			.chengter {
				//border: 1px solid red;
				height: 100%;
				border-radius: 20rpx;
				display: flex;
				background: url('../../static/iamges/richer_banner1.png') center center;
				background-size: 100% 146rpx;

				.left {
					//border: 1px solid black;
					width: 49%;
					color: white;
					font-size: 30rpx;
					padding: 15rpx 30rpx;
					line-height: 50rpx;
				}

				.right {
					//border: 1px solid blue;
					flex-grow: 1;
					color: white;
					font-size: 30rpx;
					padding: 15rpx 30rpx;
					line-height: 50rpx;
				}
			}
		}

		.fundType {
			padding: 0 24rpx;
			margin-top: 40rpx;

			//border: 1px solid black;
			.center {
				width: 91%;
				margin: 0 auto;
				//border: 1px solid black;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.first {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;

					//border: 1px solid red;
					image {
						width: 70rpx;
						height: 70rpx;
						overflow: hidden;
					}
				}
			}
		}

		.realTimeNews {
			padding: 0 24rpx;
			margin-top: 40rpx;

			.center {
				//border: 1px solid red;
				height: 262rpx;
				border-radius: 15rpx;
				background-color: #ffffff;

				.top {}

				.bottom {
					display: flex;
					justify-content: space-around;
					align-items: flex-end;
					//border: 1px solid black;
					margin-top: 20rpx;

					.first {
						display: flex;
						flex-direction: column;
						//border: 1px solid black;
						padding: 10rpx 10rpx;
						text-align: center;

						.title_one {
							font-size: 28rpx;

						}

						.title_two {
							font-size: 36rpx;
							color: #00aa8e;
							margin-top: 14rpx;
							font-weight: 600
						}

						.title_three {
							font-size: 25rpx;
							color: #00aa8e;
							font-weight: 600
						}

						.title_four {
							font-size: 25rpx;
							color: #00aa8e;
							margin-left: 10rpx;
							font-weight: 600
						}
					}
				}
			}
		}

		.exclusiveBenefits {
			padding: 0 24rpx;
			margin-top: 40rpx;

			.center {

				//border: 1px solid black;
				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.bottom {
					display: flex;
					justify-content: space-between;

					.taobao {
						//border: 1px solid red;
						margin-top: 24rpx;
						width: 340rpx;

						// padding: 30rpx 20rpx 20rpx;
						border-radius: 20rpx;

						.ticket {
							display: flex;

							.left {
								width: 70%;
								padding: 10rpx 5rpx;
								background-color: rgb(255, 245, 244);
								border-radius: 20rpx;
								border-right: dashed 2rpx rgb(224, 215, 211);
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.image {
									padding: 0;

									image {
										width: 200rpx;
									}
								}

								.price {
									.tetx_1 {
										margin-left: 10rpx;
										font-size: 35rpx;
										color: #ff4658;
									}

									.text_2 {
										margin-left: 5rpx;
										font-weight: 600;
									}
								}

								.last {
									.last_title {
										margin-left: 10rpx;
										color: #ff623c;
									}
								}
							}

							.right {
								width: 30%;
								padding: 40rpx 20rpx;
								background-color: rgb(255, 245, 244);
								border-radius: 20rpx;
								display: flex;
								align-items: center;
								color: #ff623c;
							}
						}
					}
				}
			}
		}

		.hotFunds {
			padding: 0 24rpx;
			margin-top: 42rpx;

			.center {

				//border: 1px solid black;
				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.hotFunds_list {
					margin-top: 40rpx;
					//border: 1px solid black;
					//height: 100rpx;
					background-color: white;
					border-radius: 20rpx;
					padding: 30rpx 30rpx;

					.first {
						border-bottom: 1px solid #f3f3f3;
						padding: 20rpx 0rpx;

						// height: 50rpx;
						.top {
							display: flex;
							align-items: center;

							.top_title {
								font-weight: bold;
								font-size: 32rpx;
							}

							.right {
								margin-left: 36rpx;
								border-radius: 10rpx;
								background-color: #ff623c;
								color: white;
								font-size: 22rpx;
								padding: 12rpx;
							}
						}

						.bottom {
							margin-top: 10rpx;
							display: flex;
							justify-content: space-between;
							text-align: center;

							.bottom_left {
								text-align: left;

								.left_t1 {
									color: #ff4658;
									font-size: 40rpx;
								}

								.left_t2 {
									color: #ff4658;
								}
							}

							.bottom_center {
								.center_t1 {
									font-size: 40rpx;
								}
							}

							.bottom_right {
								.right_t1 {
									font-size: 40rpx;
								}
							}

							.v {
								color: #b3b3b3;
							}
						}
					}
				}
			}
		}

	}
</style>
